<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手写</title>
    <script src="../Scripts/jquery-1.11.0.min.js"></script>


    <script type="text/javascript" src="../Scripts/bootstrap/js/jquery.min.js"></script>
    <script type="text/javascript" src="../Scripts/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../Scripts/QueryString.js" ></script>
    <script type="text/javascript" src="../Scripts/config.js" ></script>
    <script src="../Scripts/jq-signature.min.js" type="text/javascript"></script>
    <script src="../Scripts/jq-signature.js"></script>
</head>
<body>
    <div class="htmleaf-container">
        <div class="row">
            <div class="col-xs-12" style="width:300px">
                <div class="js-signature" data-border="1px solid black" 
                    data-line-color="#bc0000" data-auto-fit="true">
                </div>
                <p>
                    <button id="clearBtn" class="btn btn-default" onclick="clearCanvas();">
                        清除</button>&nbsp;
                    <button id="saveBtn" class="btn btn-default" onclick="saveSignature();" disabled>
                        确定</button></p>
                <div id="signature">
                    <p>
                        <em></em>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(document).on('ready', function () {
            //if ($('.js-signature').length) {
            $('.js-signature').jqSignature();
            //  }
        });

        function clearCanvas() {
            $('#signature').html('<p><em></em></p>');
            $('.js-signature').eq(0).jqSignature('clearCanvas');
            $('#saveBtn').attr('disabled', true);
        }

        function saveSignatureBack() {
            var nodeid = GetQueryString("FK_Node");
            var fk_flow = GetQueryString("FK_Flow");
            var workid = GetQueryString("WorkID");
            $('#signature').empty();
            var Pic = $('.js-signature').eq(0).jqSignature('getDataURL');
            Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "")
            // Sending the image data to Server
            $.ajax({
                type: 'POST',
                url: 'Save_Picture.aspx/UploadPic',
                data: '{ "imageData" : "' + Pic + '","WorkID":"' + workid + '","FK_Node":"' + nodeid + '","FK_Flow":"' + fk_flow + '" }',
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: function (msg) {
                    alert("图片上传成功。");
                   // window.close();
                }
            });
        }

        function saveSignature() {

            var Pic = $('.js-signature').eq(0).jqSignature('getDataURL');
            Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "")
            var form = new FormData();
            form.append("imageData", Pic);

            // Sending the image data to Server 
            $.ajax({
                type: 'POST',
                url: Handler + "?DoType=SaveHandWritingImg",
                data:form,
                processData: false,
                contentType: false,
                success: function (data) {
                    if (data.indexOf('err@') == 0) {
                        alert(data);
                        return;
                    }
                    alert("图片上传成功.");
                }
            });
        }

        $('.js-signature').eq(0).on('jq.signature.changed', function () {
            $('#saveBtn').attr('disabled', false);
        });


    </script>
</body>
</html>
